<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>样式</title>
		<!-- 关联外部样式 :link标签-->
		<link href="font-sytle.css" rel="stylesheet"/>
		<!-- 内部样式：type可有可无 -->
		<style type="text/css">
			h3{
				color:green;          /*字体颜色*/
				font-size:28px;        /*字体大小*/
				text-align: center;      /*文字居中显示*/     (内部样式)
			}
			p{
				color:blue;
			}
			.font1 li{
				color:red;
			}
			ol li{
				font-size: 24px;
			}
		</style>
		.col{     /*类选择器*/
			font-size:36px;
		}
		#size{  /*id选择器*/
			color:gren;
		}
	</head>
	<body>
			<!-- css:层叠样式表、级联样式表 -->
			<!-- 
			 引入样式：
			 1.内联样式:在标签中加入style属性（权重很高）
			 2.内部样式：在HTML文件中用style标签书写
			 3.外部样式：(控制多个页面)
			      step1：书写css样式文件
				  stpe2:在HTML文件中用link关联样式表。
				  同时对一个标签作用内联样式、内部样式和内联样式时，样式采用的优先级：
				  内联样式优先级最高，内部样式和外部样式中谁离标签更近，谁的优先级更高。
				  
			 color:文本字体颜色
			 font:文字   size:大小    font-size:字体大小
			 -->
			 <!-- 
			 选择器
			      1.标签选择：选择标签
				  2.类选择：在结构中用class属性，在样式中用.类名
				  3.id选择：：在结构中用id属性，在样式中用#id名
			  -->
			<h2 style="color:blue; font-size:32px;">古诗中文网</h2>      <!-- 内联样式 -->
			<h3 class="col">蒹葭</h3>
			<p class="col">蒹葭苍苍，白露为霜</p>
			<p class="col" id="">所谓伊人，在水一方</p>
			<ul>
				<li>首页</li>
				<li>商品详情</li>
				</ul>
				<ol>
					<li>前端应用</li>
					<li>平凡的世界</li>
				</ol>
	</body>
</html>
